<!DOCTYPE html>
<html>
<head>
	<title>button的不同hover效果</title>
</head>
<style type="text/css">
	#neon-btn {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 200px;
		background: #031628;
	}

	#neon-btn .btn {
		border: 1px solid;
		background-color: transparent;
		text-transform: uppercase;
		font-size: 14px;
		padding: 10px 20px;
		font-weight: 300;
	}

	#neon-btn .one {
	  	color: #4cc9f0;
	}

	#neon-btn .two {
	  	color: #f038ff;
	}

	#neon-btn .three {
	  	color: #b9e769;
	}

	#neon-btn .btn:hover {
		color: white;
		border: 0;
	}

	#neon-btn .one:hover {
		background-color: #4cc9f0;
		-webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
		-moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
		box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
	}

	#neon-btn .two:hover {
		background-color: #f038ff;
		-webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
		-moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
		box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
	}

	#neon-btn .three:hover {
		background-color: #b9e769;
		-webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
		-moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
		box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
	}

	#draw-border {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 200px;
		background: #eee;
	}

	.four {
		border: 0;
		background: none;
		text-transform: uppercase;
		color: #4361ee;
		font-weight: bold;
		position: relative;
		outline: none;
		padding: 10px 20px;
		box-sizing: border-box;
	}

	.four::before, .four::after {
		box-sizing: inherit;
		position: absolute;
		content: '';
		border: 2px solid transparent;
		width: 0;
		height: 0;
	}

	.four::after {
		bottom: 0;
		right: 0;
	}

	.four::before {
		top: 0;
		left: 0;
	}

	.four:hover::before, .four:hover::after {
		width: 100%;
		height: 100%;
	}

	.four:hover::before {
		border-top-color: #4361ee;
		border-right-color: #4361ee;
		transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
	}

	.four:hover::after {
		border-bottom-color: #4361ee;
		border-left-color: #4361ee;
		transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
	}

	#border-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 200px;
		background: rgba(0,0,0,.5);
	}

	.five {
		border: 0;
		border-radius: 10px;
		background: #2ec4b6;
		text-transform: uppercase;
		color: white;
		font-size: 16px;
		font-weight: bold;
		padding: 15px 30px;
		outline: none;
		position: relative;
		transition: border-radius 3s;
		-webkit-transition: border-radius 3s;
	}

	.five:hover {
		border-bottom-right-radius: 50px;
		border-top-left-radius: 50px;
		border-bottom-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	#frozen-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 200px;
		background: #282923;
	}

	.six {
		border: 0;
		margin: 20px;
		text-transform: uppercase;
		font-size: 20px;
		font-weight: bold;
		padding: 15px 50px;
		border-radius: 50px;
		color: white;
		outline: none;
		position: relative;
	}

	.six:before{
		content: '';
		display: block;
		background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
		background-size: 210% 100%;
		background-position: right bottom;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		bottom:0;
		right:0;
		left: 0;
		border-radius: 50px;
		transition: all 1s;
		-webkit-transition: all 1s;
	}

	.green {
		background-image: linear-gradient(to right, #25aae1, #40e495);
		box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
	}

	.purple {
		background-image: linear-gradient(to right, #6253e1, #852D91);
		box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
	}

	.purple:hover:before {
	  	background-position: left bottom;
	}

	.green:hover:before {
	  	background-position: left bottom;
	}

	#shiny-shadow {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 200px;
		background: #1c2541;
	}

	.seven {
		border: 2px solid white;
		background: transparent;
		text-transform: uppercase;
		color: white;
		padding: 15px 50px;
		outline: none;
		overflow: hidden;
		position: relative;
	}

	.seven span {
	  	z-index: 20;
	}

	.seven:after {
	  	content: '';
	    display: block;
	    position: absolute;
	    top: -36px;
	    left: -100px;
	    background: white;
	    width: 50px;
	    height: 125px;
	    opacity: 20%;
	    transform: rotate(-45deg);
	}

	.seven:hover:after {
		left: 120%;
		transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
		-webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
	}

	#loading-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 200px;
	}

	.eight {
		background: transparent;
		border: 0;
		border-radius: 0;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 20px;
		padding: 15px 50px;
		position: relative;
	}

	.eight:before {
		transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
		content: '';
		width: 1%;
		height: 100%;
		background: #ff5964;
		position: absolute;
		top: 0;
		left: 0;
	}

	.eight span {
	  	mix-blend-mode: darken;
	}

	.eight:hover:before {
		background: #ff5964;
		width: 100%;
	}
</style>
<body>
	<div id="neon-btn">
	  	<button class="btn one">Hover me</button>
	  	<button  class="btn two">Hover me</button>
	  	<button  class="btn three">Hover me</button>
	</div>
	<div id="draw-border">
	  	<button class="four">Hover me</button>
	</div>
	<div id="border-btn">
	  	<button class="five">Hover me</button>
	</div>
	<div id="frozen-btn">
	  	<button class="six green">Hover me</button>
	  	<button class="six purple">Hover me</button>
	</div>
	<div id="loading-btn">
	  	<button class="eight"><span>Hover me</span></button>
	</div>
	<div id="shiny-shadow">
	  	<button class="seven"><span>Hover me</span></button>
	</div></body>
</html>